<template>
    <div ref="chart" style="height:38vh;width: 500px;"></div>
    </template>
    
    <script>
    import axios from 'axios';
    import * as echarts from 'echarts'
    
    export default {
    data() {
    return {
    chart:null,
    data: [] // 初始化 data 变量为空数组
    };
    },
    mounted() {
    this.initChart(); // 初始化 Echarts 实例
    this.fetchData();
    },
    methods: {
    initChart() {
    this.chart = echarts.init(this.$refs.chart);
    },
    fetchData() {
    this.$http.get('http://localhost:8080/work/sortcount') // 发起后端请求获取查询结果
    .then(response => {
      this.data = response.data; // 将返回的数据赋值给 data 变量
      this.renderChart();
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
    },
    renderChart() {
    const categoryNames = this.data.map(row => row.worksort);
    const categoryCounts = this.data.map(row => row.worksortcount);
    const pieChartData = categoryNames.map((name, index) => ({
    name: name,
    value: categoryCounts[index]
    }));
    const options = {
    // 在这里根据需求配置 Echarts 图表的选项
     title: {
     text: '作品分类分布',
     left: 'center'
    },
        tooltip: {
            trigger: 'item'
            },
        legend: {
        orient: 'vertical',
        left: 'left'
        },

    series: [{
        name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: pieChartData,
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
    }]
    };
    this.chart.setOption(options);
    }
    }
    };
    </script>
    
    <style>
    /* 在这里添加你的样式 */
    </style>

